<div class="modal-header">
    <h3 class="modal-title">容器设置-{{item.name}}</h3>
</div>
<div class="modal-body">
    <form class="form-horizontal form-content" name="free_container_Form">
        <div class="form-group">
            <label class="control-label col-xs-2">尺寸模式</label>
            <div class="col-xs-2">
                <div class="checkbox checkbox-success">
                    <input type="checkbox" id="size_mode_1" name="size_mode_1" ng-model="item.isEnableLeft">
                    <label for="size_mode_1">
                        左定位
                    </label>
                </div>
            </div>
            <div class="col-xs-2">
                <div class="checkbox checkbox-success">
                    <input type="checkbox" id="size_mode_2" name="size_mode_2" ng-model="item.isEnableTop">
                    <label for="size_mode_2">
                        上定位
                    </label>
                </div>
            </div>
            <div class="col-xs-2">
                <div class="checkbox checkbox-success">
                    <input type="checkbox" id="size_mode_3" name="size_mode_3" ng-model="item.isEnableRight">
                    <label for="size_mode_3">
                        右定位
                    </label>
                </div>
            </div>
            <div class="col-xs-2">
                <div class="checkbox checkbox-success">
                    <input type="checkbox" id="size_mode_4" name="size_mode_4" ng-model="item.isEnableBottom">
                    <label for="size_mode_4">
                        下定位
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">位置设置</label>
            <div class="col-xs-10">
                <div class="col-xs-3">
                    <div class="row" ng-if="item.isEnableLeft">
                        <label class="control-label col-xs-4 padding-left-zero">Left</label>
                        <div class="col-xs-8">
                            <input type="text" ng-model="item.left" class="form-control"
                                   placeholder="left">
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="row" ng-if="item.isEnableTop">
                        <label class="control-label col-xs-4 padding-left-zero">Top</label>
                        <div class="col-xs-8">
                            <input type="text" ng-model="item.top" class="form-control"
                                   placeholder="top">
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="row" ng-if="item.isEnableRight">
                        <label class="control-label col-xs-4 padding-left-zero">Right</label>
                        <div class="col-xs-8">
                            <input type="text" ng-model="item.right" class="form-control"
                                   placeholder="right">
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="row" ng-if="item.isEnableBottom">
                        <label class="control-label col-xs-4 padding-left-zero">Bottom</label>
                        <div class="col-xs-8">
                            <input type="text" ng-model="item.bottom" class="form-control"
                                   placeholder="bottom">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2"></label>
            <div class="col-xs-10">
                <div class="col-xs-3">
                    <div class="row" ng-if="item.isEnableLeft">
                        <label class="control-label col-xs-4 padding-left-zero">Left</label>
                        <div class="col-xs-8">
                            <select class="form-control" name="site-type-left" id="site-type-left" style="max-width: 30px;min-width: 90px;"
                                    ng-options="t.value as t.text for t in siteType"
                                    ng-model="item.leftSiteType"></select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="row" ng-if="item.isEnableTop">
                        <label class="control-label col-xs-4 padding-left-zero">Top</label>
                        <div class="col-xs-8">
                            <select class="form-control" name="site-type-top" id="site-type-top" style="max-width: 30px;min-width: 90px;"
                                    ng-options="t.value as t.text for t in siteType"
                                    ng-model="item.topSiteType"></select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="row" ng-if="item.isEnableRight">
                        <label class="control-label col-xs-4 padding-left-zero">Right</label>
                        <div class="col-xs-8">
                            <select class="form-control" name="site-type-right" id="site-type-right" style="max-width: 30px;min-width: 90px;"
                                    ng-options="t.value as t.text for t in siteType"
                                    ng-model="item.rightSiteType"></select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="row" ng-if="item.isEnableBottom">
                        <label class="control-label col-xs-4 padding-left-zero">Bottom</label>
                        <div class="col-xs-8">
                            <select class="form-control" name="site-type-bottom" id="site-type-bottom" style="max-width: 30px;min-width: 90px;"
                                    ng-options="t.value as t.text for t in siteType"
                                    ng-model="item.bottomSiteType"></select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">尺寸设置</label>
            <div class="col-xs-10">
                <div class="col-xs-3" ng-if="!(item.isEnableRight && item.isEnableLeft)">
                    <label class="control-label col-xs-4 padding-left-zero">Width</label>
                    <div class="col-xs-8">
                        <input type="text" ng-model="item.width" class="form-control"
                               placeholder="width">
                    </div>
                </div>
                <div class="col-xs-3" ng-if="!(item.isEnableRight && item.isEnableLeft)">
                    <label class="control-label col-xs-4 padding-left-zero">单位</label>
                    <div class="col-xs-8">
                        <select class="form-control" name="size-type-width" id="size-type-width"  style="max-width: 30px;min-width: 90px;"
                                ng-options="t.value as t.text for t in sizeType"
                                ng-model="item.widthSizeType"></select>
                    </div>
                </div>
                <div class="col-xs-3" ng-if="!(item.isEnableBottom && item.isEnableTop)">
                    <label class="control-label col-xs-4 padding-left-zero">Height</label>
                    <div class="col-xs-8">
                        <input type="text" ng-model="item.height" class="form-control"
                               placeholder="height">
                    </div>
                </div>
                <div class="col-xs-3" ng-if="!(item.isEnableBottom && item.isEnableTop)">
                    <label class="control-label col-xs-4 padding-left-zero">单位</label>
                    <div class="col-xs-8">
                        <select class="form-control" name="size-type-height" id="size-type-height"  style="max-width: 30px;min-width: 90px;"
                                ng-options="t.value as t.text for t in sizeType"
                                ng-model="item.heightSizeType"></select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">选中锁定</label>
            <div class="col-xs-10">
                <div class="checkbox checkbox-success">
                    <input type="checkbox" id="locked_item" name="locked_item" ng-model="item.locked">
                    <label for="locked_item">
                        锁定
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">ClassName</label>
            <div class="col-xs-10">
                <input type="text" ng-model="item.className" class="form-control" placeholder="ClassName">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">Margin(Box)</label>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.marginTop" class="form-control"
                               placeholder="marginTop(i.e:5px)"></div>
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.marginBottom" class="form-control"
                               placeholder="marginBottom(i.e:5px)">
                    </div>
                </div>
                <div class="row margin-top-5px">
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.marginLeft" class="form-control"
                               placeholder="marginLeft(i.e:5px)">
                    </div>
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.marginRight" class="form-control"
                               placeholder="marginRight(i.e:5px)">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">Padding(Box)</label>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.paddingTop" class="form-control"
                               placeholder="paddingTop(i.e:5px)">
                    </div>
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.paddingBottom" class="form-control"
                               placeholder="paddingBottom(i.e:5px)"></div>
                </div>
                <div class="row margin-top-5px">
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.paddingLeft" class="form-control"
                               placeholder="paddingLeft(i.e:5px)">
                    </div>
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.paddingRight" class="form-control"
                               placeholder="paddingRight(i.e:5px)">
                    </div>
                </div>

            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">Position(Box)</label>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.top" class="form-control"
                               placeholder="top(i.e:5px)">
                    </div>
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.bottom" class="form-control"
                               placeholder="bottom(i.e:5px)"></div>
                </div>
                <div class="row margin-top-5px">
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.left" class="form-control"
                               placeholder="left(i.e:5px)">
                    </div>
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.right" class="form-control"
                               placeholder="right(i.e:5px)">
                    </div>
                </div>

            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">Size(Box)</label>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.width" class="form-control"
                               placeholder="width(i.e:5px)">
                    </div>
                    <div class="col-xs-6">
                        <input type="text" ng-model="item.css.height" class="form-control"
                               placeholder="height(i.e:5px)"></div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">BackgroundColor(Box)</label>
            <div class="col-xs-10">
                <input type="text" ng-model="item.css.backgroundColor" class="form-control"
                       placeholder="backgroundColor(i.e:#FFFFFF)">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">BorderRadius</label>
            <div class="col-xs-10">
                <input type="text" ng-model="item.css.__borderRadius" class="form-control"
                       placeholder="borderRadius(i.e:10px)">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">UnVisibility</label>
            <div class="col-xs-4">
                <div class="checkbox checkbox-success">
                    <input type="checkbox" id="unVisibility" name="unVisibility" ng-model="item.css.__unVisibility">
                    <label for="unVisibility">
                        Enable
                    </label>
                </div>
            </div>
            <label class="control-label col-xs-2">BoxShadow</label>
            <div class="col-xs-4">
                <div class="checkbox checkbox-success">
                    <input type="checkbox" id="box_shadow" name="box_shadow" ng-model="item.css.__boxShadow">
                    <label for="box_shadow">
                        Enable
                    </label>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()">确认修改</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">取消修改</button>
    <button class="btn btn-danger" type="button" ng-click="editChart()">编辑指标</button>
</div>